<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search">
			<input @focus="focus" @blur="blur(serachVal)"  @confirm="search(serachVal)" 
			@input="search(serachVal)" placeholder="请搜索您喜欢的音乐" v-model="serachVal" />
		</view>
		<!-- 搜索结果 -->
		<view class="search_show">
			<scroll-view :scroll-y="true" class="search_show_scroll" >
				<uni-list v-show="searchShow">
					<uni-list-item v-for="(item,index) in searchList" :key="index"
					:title="item.name" :note="item.artists[0].name" :clickable="true"
					@click="searchToMusic(item)"></uni-list-item>
				</uni-list>
				<uni-list v-show="hotListVis">
					<uni-list-item>
						<view class="hot_title">热搜榜</view>
					</uni-list-item>
					<uni-list-item v-for="(item,index) in hotList" :key="index"
					 :rightText="item.content">
					<text>{{item.searchWord}}</text>
					<image :src="item.iconUrl" mode="aspectFit"
					style="width: 30rpx;height: 30rpx;"></image>
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</view>
		<!-- 轮播图 -->
		<view class="banner_box">
			<swiper :autoplay="true" :circular="true" duration="500" :indicator-dots="true">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="item.pic" ></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 中间导航栏 -->
		<view class="middle_bar">
			<view v-for="(item,index) in btn_list" :key="index">
				<icon type="#DD4A68" :class="item.icon"></icon>
				<view class="btn_title">{{item.title}}</view>
			</view>
		</view>
		<!-- 人气歌单推荐 -->
		<view class="rec_music">
			<view class="btn_box">
				<view style="font-size: 35rpx;">人气歌单推荐</view>
				<view class="btn_more">查看更多</view>
			</view>
			<scroll-view :scroll-x="true">
				<view class="scroll_box">
					<view class="music_item" v-for="(item,index) in recMusList" :key="index">
						<view class="banner_img">
							<image :src="item.picUrl" mode="aspectFit"></image>
						</view>
						<view class="play_count">
							<icon type="#FFFDEF" class="iconfont icon-z"></icon>
						{{ item.playCount.toString() | getCount}}
						</view>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 每日推荐新歌列表 -->
		<view class="newSong_box">
			<view class="box_title">
				<view style="font-size: 35rpx;">新歌推荐</view>
				<view class="btn_more">查看更多</view>
			</view>
			<view class="new_song">
				<uni-list>
					<uni-list-item v-for="(item,index) in newSongList" :key="index" 
					:rightText="item.song.artists[0].name" :clickable="true"
					 @click="toMusic(item)">
						<view class="song_info">
							<image :src="item.picUrl" mode="aspectFit"></image>
							<text>{{item.name}}</text>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
	</view>
	
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import {searchMusic,getHotMusic,getRecMus,getNewMus} from '@/network/music.js'
	import {getBanner} from '@/network/banner.js'
	export default {
		data() {
			return {
				serachVal:'',
				searchShow:false,
				hotListVis:false,
				searchList:[],
				hotList:[],
				bannerList:[],
				btn_list:[
					{icon:'iconfont icon-rili',title:'每日推荐'},
					{icon:'iconfont icon-gedan',title:'歌单'},
					{icon:'iconfont icon-paihangbang',title:'排行榜'},
					{icon:'iconfont icon-diantai',title:'电台'},
					{icon:'iconfont icon-zhibo',title:'直播'},
					{icon:'iconfont icon-zhuanji',title:'数字专辑'},
					{icon:'iconfont icon-liaotian',title:'畅聊'}
				],
				recMusList:[],
				newSongList:[]
			}
		},
		filters:{
			getCount(value){
				return value.substr(0,value.length-4) + '万'
			}
		},
		methods: {
			// 搜索功能
			search(value){
				this.searchShow = true
				this.searchList = []
				if(value){
					// 网络请求
					searchMusic(value).then(res => {
						this.searchList = res.data.result.songs
					})
				}
			},
			// 监听搜索值发生变化
			focus(){
				this.hotListVis = true
			},
			blur(value){
				setTimeout(() => {
					this.hotListVis = false
					this.searchShow = false
					this.serachVal = ''
				},100)
			},
			// 获取火热列表
			getHotList(){
				getHotMusic().then(res => {
					this.hotList = res.data.data
				})
			},
			// 获取轮播图数据
			getBannerM(){
				getBanner().then(res => {
					// console.log(res)
					this.bannerList = res.data.banners
				})
			},
			// 获取人气歌单数据
			getRecMusM(num){
				getRecMus(num).then(res => {
					// console.log(res)
					this.recMusList = res.data.result
				})
			},
			// 获取推荐新音乐数据
			getNewSong(){
				getNewMus().then(res => {
					// console.log(res)
					this.newSongList = res.data.result
				})
			},
			// 跳转该音乐的播放界面
			toMusic(item){
				// console.log(item)
				uni.navigateTo({
					url:`../music/playMusic?id=${item.id}&url=${item.picUrl}
					&name=${item.name}`
				})
			},
			// 跳转该音乐的播放界面
			searchToMusic(item){
				uni.navigateTo({
					url:`../music/playMusic?id=${item.id}&url=${item.artists[0].img1v1Url}
					&name=${item.name}`
				})
			},
			// 获取圆形图标入口列表
			getIconListM(){
				getIconList().then(res => {
					console.log(res)
				})
			}
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => {
					this.getBannerM()
					this.getHotList()
					this.getNewSong()
					this.getRecMusM()
				}
			})
		},
		onLoad() {
			this.getHotList()
			this.getBannerM()
			this.getRecMusM(6)
			this.getNewSong()
		}
	}
</script>

<style lang="scss">
	.search{
		margin-top: 10rpx;
		input{
			background-color: #F1F1F1;
			height: 70rpx;
			border-radius: 50rpx;
			text-align: center;
			font-size: 25rpx;
		}
	}
	.search_show{
		position: fixed;
		width: 100%;	
		top: 165rpx;
		z-index: 998;
		.search_show_scroll{
			height: 600rpx;
		}
	}
	.hot_title{
		color: #F56C6C;
	}
	.banner_box{
		text-align: center;
		width: 100%;
		margin-top: 10rpx;
		image{
			height: 500rpx;
			width: 98%;
			border-radius: 10rpx;
		}
	}
	.middle_bar{
		display: flex;
		width: 100%;
		margin-top: 25rpx;
		justify-content: space-evenly;
		text-align: center;
		view{
			.btn_title{
				margin-top: 15rpx;
				font-size: 25rpx;
			}
			icon{
				color: #FFFDEF;
				background-color:  #ff0000;
				font-size: 50rpx;
				border: 2rpx solid #ff0000;
				border-radius: 50%;
			}
		}
	}
	.rec_music{
		margin-top: 50rpx;
		.btn_box{
			padding: 0 30rpx 30rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn_more{
				font-size: 25rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 5rpx 5rpx #EEEEEE;
			}
		}
		scroll-view{
			height: 300rpx;
			.scroll_box{
				display: flex;
				.music_item{
					position: relative;
					top: -130rpx;
					flex: 1;
					margin-left: 30rpx;
					image{
						width: 200rpx;
					}
					.play_count{
						icon{
							font-size: 20rpx;
						}
						position: relative;
						top: -335rpx;
						font-size: 20rpx;
						color: #FFFDEF;
					}
					.name{
						position: relative;
						top: -150rpx;
						height: 70rpx;
						font-size: 25rpx;
						word-wrap: break-word;
						overflow-y: hidden;
					}
				}
			}
		}
	}
	.newSong_box{
		width: 100%;
		margin-top: 25rpx;
		.box_title{
			padding: 0 30rpx 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn_more{
				font-size: 25rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 5rpx 5rpx #EEEEEE;
			}
		}
		.new_song{
			uni-list{
				background-color: #0077AA;
			}
			image{
				width: 120rpx;
				height: 120rpx;
			}
			.song_info{
				display: flex;
				align-items: center;
				text{
					font-size: 25rpx;
					margin-left: 20rpx;
					color: #FFA197;
				}
			}
		}
	}
</style>
